<template>
    <div class="app-container">
      <!-- <el-form @submit.native.prevent :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px" :label-position="labelPosition">
        <el-form-item>
          <el-checkbox v-model="queryParams.all" label="查看所有记录" true-label="1" @change="getList"></el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form> -->
      <el-descriptions class="mt20 mb20 ml10">
        <el-descriptions-item label="库存品种分类">{{ queryParams.wpggA }}</el-descriptions-item>
      </el-descriptions>
      <el-table
        v-loading="loading"
        :data="warehouseCategoryDetailList"
      >
        <af-table-column label="客户名称" prop="khmc" />
        <af-table-column label="用户条码" prop="sptm" />
        <af-table-column label="仓库条码" prop="sptmc" />
        <af-table-column label="柜号" prop="spgh" />
        <af-table-column label="批号" prop="spbh" />
        <af-table-column label="仓库" prop="spckmc" />
        <af-table-column label="仓位" prop="ckcw" />
        <af-table-column label="剩余件数" prop="spjs" />
        <af-table-column label="剩余重量(吨)" prop="spsl" />
        <af-table-column label="物品规格" prop="spzs" />
        <af-table-column label="品牌" prop="spcd" />
        <af-table-column label="入仓日期" prop="ssrqid" />
        <af-table-column label="结存天数" prop="daysi" />
        <af-table-column label="纱支" prop="wpggA" />
        <af-table-column label="工艺" prop="wpggB" />
        <af-table-column label="工序" prop="wpggC" />
        <af-table-column label="用途" prop="wpggD" />
        <af-table-column label="产地" prop="wpggE" />
        <af-table-column label="漂染性" prop="wpggF" />
        <af-table-column label="生产日期" prop="wpggG" />
        <af-table-column label="颜色" prop="wpggH" />
      </el-table>
       <pagination
          v-show="total>0"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="getList"
        />
    </div>
  </template>
  
  <script>
  import { getListWarehouseCategoryDetail } from "@/api/storage/dataAnalysis/warehouseCategory";
  
  export default {
    name: "WarehouseCategoryDetail",
    data() {
      return {
        // 显示搜索条件
        showSearch: true,
        //对齐
        labelPosition: "right",
        //加载列表
        loading: true ,
        // 查询参数
        queryParams: {
          wpggA: "",
        },
        // 高龄货物剩余货物
        warehouseCategoryDetailList: [],
        //页数
        pageSize: 10,
        //页码
        pageNum:1,
        // 总条数
        total: 0,
      };
    },
    beforeRouteEnter(to, from, next) {
      const query = to.query
      next(vm => {   
        if(Object.keys(query).length > 0) {
          vm.queryParams.wpggA = query.wpggA
          vm.getList()
        }
      })
    },
    methods: {
      /** 查询高龄货物剩余货物 */
      getList() {
        this.loading  = true
        getListWarehouseCategoryDetail(this.queryParams, {pageNum:this.pageNum, pageSize:this.pageSize}).then(response => {
          this.warehouseCategoryDetailList = response.rows;
          this.total = response.total;
          this.loading = false
        });
      },
  
      /** 重置按钮操作 */
      resetQuery() {
        this.reset()
        this.getList()
      },
      reset() {
        Object.assign(this.$data, this.$options.data())
      },
    }
  };
  </script>
  